<!-- swiper -->
<style scoped rel="stylesheet/scss" lang="scss">
	@import '../../../css/public.scss';
	@import '../../../utils/swiper/swiper3.06.min.css';
	

	.swiper-container{
		width: 100%;
		height: 215px;
	}
	.wordCn{
		width: 100%;
		position: absolute;
		height: 100%;
		background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0));
		padding-top: 30px;
		padding-left: 30px;
		color: #fff;
		opacity: 0;
		transition: all 0.7s;

		.tit{
			font-size: 36px;
			margin-top: 5px;
		}
		p{
			display: inline-block;
			margin-top: 10px;
			font-size: 24px;
			height: 40px;
			border:1px solid #fff;
			padding: 0 20px;
			line-height: 38px;
		}

	}
	.active{
		opacity: 1;
	}

</style>

<template>
	<swiper :options="swiperOption" ref="mySwiper">
		<swiper-slide v-for="(item, index) in slideData" @click="addSeiper">
			<div class="wordCn" :class="[lanInd == index ? 'active': '']">
				<div class="tit">{{item.tit1}}</div>
				<div class="tit">{{item.tit2}}</div>
				<p>{{item.dist}}</p>
			</div>
			<img :src="item.url">
		</swiper-slide>
		<!-- <div class="swiper-pagination"  slot="pagination"></div> -->
		
	</swiper>
</template>

<script>

	import { swiper, swiperSlide } from 'vue-awesome-swiper';


	export default {
		data() {
			return {
				lanInd: 0,
				slideData: [
					{
						url: 'images/banner2-1.jpg',
						tit1: '服务超过',
						tit2: '50000个家庭',
						dist: '超过98%的妈妈非常满意',
					},
					{
						url: 'images/banner2-2.jpg',
						tit1: '拥有超过',
						tit2: '20000名月嫂',
						dist: '拥有全国最多的月嫂资源',
					}
				],
				swiperOption: {
					direction : 'vertical',
					notNextTick: true,
		        	autoplay: 4000,
		          	grabCursor : true,
		         	setWrapperSize :true,
		         	autoHeight: true,
		         	paginationClickable :true,
		          	mousewheelControl : true,
		          	observeParents:true,
		          	debugger: true,
		          	onSlideChangeEnd: swiper => {
				      this.lanInd = swiper.activeIndex;
				    }
		      }
		  }
		},
		components: {
			swiper, 
			swiperSlide
		},
		methods: {
			addSeiper(){
				this.slideData.push('images/banner_01.jpg')
			},
		},
		computed: {
			swiper() {
				return this.$refs.mySwiper.swiper
			}
		},
		mounted() {
		      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
		      // console.log('this is current swiper instance object', this.swiper)
		      // this.swiper.slideTo(3, 1000, false)
		      // this.addSeiper();
		  }




		}
	</script>
